<template>
    <div>
        <el-dialog :title="title" :visible.sync="dialogVisible" width="1000px" :before-close="handleClose"
            :close-on-click-modal="false">
            <div v-if="resultValue">

                <el-card class="box-card">
                    <div class="box-card-input">
                        <el-input v-model="formInline.name" placeholder="请输入内容"
                            style="text-align: center; width: 200px;"></el-input>
                        <div style="margin-top: 8px;">{{ formInline.id }}</div>
                    </div>
                </el-card>

                <div style="margin: 24px 0;"></div>

                <el-card class="box-card">
                    <div class="row">
                        <div class="row-item">
                            <img src="../../../assets/logo.png" alt="">
                            <div>
                                <div>{{ resultValue.mapping.sourceConnector.name }}</div>
                                <div style="margin-top: 6px;">数据源：{{
            resultValue.mapping.sourceConnector.config.connectorType }}</div>
                            </div>
                        </div>
                        <div>
                            <i style="font-weight: bold;" class="el-icon-right"></i>
                        </div>
                        <div class="row-item">
                            <img src="../../../assets/logo.png" alt="">
                            <div>
                                <div>{{ resultValue.mapping.targetConnector.name }}</div>
                                <div style="margin-top: 6px;">数据源：{{
            resultValue.mapping.targetConnector.config.connectorType }}</div>
                            </div>
                        </div>
                    </div>
                </el-card>

                <div style="margin: 24px 0;"></div>

                <el-card class="box-card">
                    <el-radio-group v-model="formInline.model">
                        <el-radio label="full">全量同步</el-radio>
                        <el-radio label="increment">增量同步</el-radio>
                    </el-radio-group>
                </el-card>

                <div style="margin: 24px 0;"></div>

                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>映射关系</span>
                    </div>
                    <div>
                        <div class="row">
                            <div>
                                <span>数据源表</span>
                                <el-select v-model="formTabale.sourceTable" multiple placeholder="请选择">
                                    <el-option v-for="(item, index) in resultValue.mapping.sourceConnector.table"
                                        :key="index" :label="item.name + '(' + item.type + ')'" :value="item.name" />
                                </el-select>
                            </div>
                            <div>
                                <i class="el-icon-right"></i>
                            </div>
                            <div>
                                <span>目标源表</span>
                                <el-select v-model="formTabale.targetTable" multiple placeholder="请选择">
                                    <el-option v-for="(item, index) in resultValue.mapping.targetConnector.table"
                                        :key="index" :label="item.name + '(' + item.type + ')'" :value="item.name" />
                                </el-select>
                            </div>
                        </div>

                        <div class="row">
                            <div>
                                <span>标记主键</span>
                                <el-select v-model="formTabale.sourceTablePK" multiple filterable allow-create
                                    placeholder="请输入" default-first-option>
                                </el-select>
                            </div>
                            <div>
                                <i class="el-icon-right"></i>
                            </div>
                            <div>
                                <span>标记主键</span>
                                <el-select v-model="formTabale.targetTablePK" multiple filterable allow-create
                                    placeholder="请输入" default-first-option>
                                </el-select>
                            </div>
                        </div>
                    </div>
                    <div style="height: 32px; margin-top: 14px;">
                        <div style="float: right;">
                            <el-button type="primary" :loading="refreshLoading" size="small"
                                @click="init(id, 'tableGroups')">刷新表</el-button>
                            <el-button type="primary" size="small" :disabled="!ids.length"
                                @click="handleDelTableGroup">删除</el-button>
                            <el-button type="primary" size="small" :disabled="addTableLoading"
                                @click="handleAddTableGroup">添加</el-button>
                        </div>
                    </div>

                    <el-table :data="resultValue.tableGroups"
                        v-if="resultValue.tableGroups && resultValue.tableGroups.length" stripe style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column prop="date" label="数据源表" width="">
                            <template slot-scope="scope">
                                {{ scope.row.sourceTable.name }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="目标源表" width="">
                            <template slot-scope="scope">
                                {{ scope.row.targetTable.name }}
                            </template>
                        </el-table-column>
                        <el-table-column type="selection" width="55" align="center">
                        </el-table-column>
                    </el-table>
                </el-card>
            </div>

            <span slot="footer" class="dialog-footer" v-if="!loadingForm">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit" :loading="btnLoading">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
let _this;
import { findMapping, updataMapping, addTableGroup, delTableGroup, refreshTables } from "@/api/drive/index";
export default {
    data() {
        return {
            value: "",
            radio: "",
            input: "",

            title: "",
            ids: [],
            id: null,
            refreshLoading: false,
            addTableLoading: false,
            dialogVisible: false,
            formInline: {},
            formTabale: {},
            loadingScreen: null,
            loadingForm: false,
            btnLoading: false,
            resultValue: ""
        };
    },
    created() {
        this.restForm();
    },
    methods: {
        async init(id, tableGroups) {
            try {
                this.id = id;
                if (tableGroups != 'tableGroups') {
                    this.restForm();
                } else {
                    this.refreshLoading = true;
                    refreshTables({ id: this.id });
                }
                let res = await findMapping({}, { id });
                this.resultValue = res.resultValue;
                if (tableGroups == 'tableGroups') {
                    this.refreshLoading = false;
                    return;
                }
                this.formInline.name = res.resultValue.mapping.name;
                this.formInline.id = res.resultValue.mapping.id;
                this.formInline.model = res.resultValue.mapping.model;
                this.dialogVisible = true;
            } catch (error) {
                this.refreshLoading = false;
            }
        },
        handleClose() {
            this.dialogVisible = false;
        },
        async handleSubmit() {
            try {
                this.btnLoading = true;
                let res = await updataMapping(this.formInline);
                this.$emit("success");
                this.dialogVisible = false;
                this.btnLoading = false;
            } catch (error) {
                this.btnLoading = false;
            }
        },
        handleDelTableGroup() {
            this.$confirm('此操作将永久删除该, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await delTableGroup({
                    ids: this.ids.toString(),
                    mappingId: this.id
                });
                this.ids = [];
                this.$message.success("删除成功");
                this.init(this.id, 'tableGroups');
            })
        },
        async handleAddTableGroup() {
            try {
                this.addTableLoading = true;
                let res = await addTableGroup({
                    mappingId: this.id,
                    sourceTable: this.getCommonElements(this.formTabale.sourceTable, this.formTabale.targetTable).join("|"),
                    targetTable: this.getCommonElements(this.formTabale.sourceTable, this.formTabale.targetTable).join("|"),
                    sourceTablePK: this.getCommonElements(this.formTabale.targetTablePK, this.formTabale.sourceTablePK).join("|"),
                    targetTablePK: this.getCommonElements(this.formTabale.targetTablePK, this.formTabale.sourceTablePK).join("|")
                });
                this.addTableLoading = false;
                this.init(this.id, 'tableGroups');
            } catch (error) {
                this.addTableLoading = false;
            }
        },
        /** 多选框选中数据 */
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id);
        },
        restForm() {
            this.formInline = {
                "id": "",
                "name": "",
                "model": "",
                "sortedTableGroupIds": "",
                "readNum": 20000,
                "batchNum": 1000,
                "threadNum": 10,
                "incrementStrategy": "log",
                "metaSnapshot": "",
                "timingInsert": "I",
                "timingUpdate": "U",
                "timingDelete": "D",
                "timingCronExpression": "*/30 * * * * ?",
                "timingEventFieldName": "",
                "filter": "[]",
                "convert": "[]",
                "pluginId": ""
            }
            this.formTabale = {
                mappingId: "",
                sourceTable: "",
                targetTable: "",
                sourceTablePK: "",
                targetTablePK: "",
            }
        },
        getCommonElements(arr1, arr2) {
            const set1 = new Set(arr1);
            const set2 = new Set(arr2);
            const commonElements = Array.from(set1).filter(item => set2.has(item));
            return commonElements;
        }
    },
    computed: {},
};
</script>
<style lang="scss" scoped>
.row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &+.row {
        margin-top: 18px;
    }

    span {
        margin-right: 12px;
    }

    .el-icon-right {
        font-size: 20px;
    }

    .row-item {
        img {
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }

        display: flex;
        align-items: center;
        font-size: 14px;
    }
}

.box-card-input {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
</style>